<template>
  <div id="app">
    
    <!-- 底部盒子 -->
    <div class="nav-bottom">
      <ul>
        <!-- router-link是路由的连接，是以a标签的形式展示，可以使用tag指令 router-link标签指定渲染元素 -->
        <router-link to="/home" tag="li">
          <i class="glyphicon glyphicon-home"></i>
          <span>首页</span>
        </router-link>
        <router-link to="/message" tag="li">
          <i class="glyphicon glyphicon-comment"></i>
          <span>留言</span>
        </router-link>
        <router-link to="/video" tag="li">
          <i class="glyphicon glyphicon-expand"></i>
          <span>视频</span>
        </router-link>
        <router-link to="/my" tag="li">
          <i class="glyphicon glyphicon-user"></i>
          <span>我的</span>
        </router-link>
      </ul>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
  ul,ol,li,body,html,p{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  *{
    font-size: 30px;
  }
  .nav-bottom{
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    padding-bottom: 35px;
    background: -webkit-linear-gradient(bottom,#5B66B6,#0AB0D5);
    border-top-left-radius: 40px;
		border-top-right-radius: 40px;
    ul{
      padding-top: 0% ;
      display: flex;
      height: 100px;
      li{
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
      }
     .router-active{
        background: #108ee9;
        color: #fff;
        border-top-left-radius: 40px;
		    border-top-right-radius: 40px;
     }
    }
  }
</style>
